<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
        body,button,input,select,textarea{font:12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;color: #666;}
        ol,ul{list-style:none}
        a{text-decoration:none}
        fieldset,img{border:0;vertical-align:top;}
        a,input,button,select,textarea{outline:none;}
        a,button{cursor:pointer;}
        .wrap{
            width:1200px;
            margin:100px auto;
        }
        .slide {
            height:500px;
            position: relative;
        }
        .slide li{
            position: absolute;
            left:200px;
            top:0;
        }
        .slide li img{
            width:100%;
        }
        .arrow{
            opacity: 0;
        }
        .prev,.next{
            width:76px;
            height:112px;
            position: absolute;
            top:50%;
            margin-top:-56px;
            background: url(images/prev.png) no-repeat;
            z-index: 99;
        }
        .next{
            right:0;
            background-image: url(images/next.png);
        }

    </style>
</head>
<body>

<script src="../../../js/common.js"></script>
<script>
    window.onload = function(){
        var flag = true;                                                            //假设所有动画执行完毕。(开关)
        var config = [
            {
                width: 400,
                top: 20,
                left: 50,
                opacity: 0.2,
                zIndex: 2
            },//0
            {
                width: 600,
                top: 70,
                left: 0,
                opacity: 0.8,
                zIndex: 3
            },//1
            {
                width: 800,
                top: 100,
                left: 200,
                opacity: 1,
                zIndex: 4
            },//2
            {
                width: 600,
                top: 70,
                left: 600,
                opacity: 0.8,
                zIndex: 3
            },//3
            {
                width: 400,
                top: 20,
                left: 750,
                opacity: 0.2,
                zIndex: 2
            }//4

        ];                                                         //每个Li移动的位置和透明度。
        //展开所有的li
        var list = document.getElementById("slide").getElementsByTagName("li");     //获取所有的li
        function assign(){
            for (var i=0;i<list.length;i++){                                        //循环所有的li
                shiftAnimat(list[i],config[i],function(){                           //调用动画函数。
                    //回调函数默认所有动画执行完毕后才会执行,也就是说只有这个动画执行完毕了才会改变flag的值。
                    flag = true;
                })
            }
        }

        assign();


        my$("arrRight").onclick = function(){           //右箭头鼠标点击事件,true代表上一个已经执行完毕,改false,执行下一个。
            if(flag){
                flag = false;
                config.push(config.shift());
                assign()
            }

        };
        my$("arrLeft").onclick = function(){
            if(flag){
                config.unshift(config.pop())
                assign()
            }
        };



        //鼠标放上div上显示2个箭头。
        document.getElementById("slide").onmouseover =  function(){
            shiftAnimat(my$("arrow"),{"opacity":1})
        };
        document.getElementById("slide").onmouseout =  function(){
            shiftAnimat(my$("arrow"),{"opacity":0})
        }
    }
</script>

<div class="wrap" id="wrap">
    <div class="slide" id="slide">
        <ul>
            <li><a href="#"><img src="images/slidepic1.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/slidepic2.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/slidepic3.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/slidepic4.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/slidepic5.jpg" alt=""/></a></li>
        </ul>
        <div class="arrow" id="arrow">
            <a href="javascript:void(0);" class="prev" id="arrLeft"></a>
            <a href="javascript:void(0);" class="next" id="arrRight"></a>
        </div>
    </div>
</div>
</body>
</html>